<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="人员搜索：">
        <el-input v-model.trim="page.userName" placeholder="请输入" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="background-color: #5f84ff" icon="el-icon-search" @click="getUserList">查询</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-row style="height:60px" type="flex" align="middle">
        <el-button
          icon="el-icon-plus"
          size="small"
          type="warning"
          style="background: linear-gradient(135deg,#ff9743,#ff5e20)!important"
          @click="isSwitch = true"
        >新建</el-button>
      </el-row>
      <el-table
        :data="userList"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          :index="(page.pageSize * (page.pageIndex - 1) + 1)"
        />
        <el-table-column
          prop="userName"
          label="人员名称"
        />
        <el-table-column
          prop="regionName"
          label="归属区域"
        />
        <el-table-column
          prop="role.roleName"
          label="角色"
        />
        <el-table-column
          prop="mobile"
          label="联系电话"
        />
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="text" style="color: #5f84ff" @click="upRole(row)">修改</el-button>
            <el-button type="text" style="color: #ff5a5a" @click="delRole(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="page.pageIndex"
        :page-size.sync="page.pageSize"
        :page-sizes="[2, 5, 10, 15]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="getUserList"
        @current-change="getUserList"
      />
    </div>
    <newlyBuild ref="newlyBuild" :is-switch="isSwitch" @close="closeFn" />
  </div>
</template>

<script>
import { getUserListAPI, delRoleAPI } from '@/api/user'
import newlyBuild from './components/newlyBuild.vue'
export default {
  name: '',
  components: {
    newlyBuild
  },
  props: {},
  data() {
    return {
      page: {
        pageIndex: 1,
        pageSize: 10,
        userName: ''
      },
      totalCount: null,
      totalPage: null,
      userList: [],
      isSwitch: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getUserList()
  },
  methods: {
    // 获取用户列表/查询
    async getUserList() {
      try {
        const res = await getUserListAPI(this.page)
        // console.log(res)
        this.totalCount = +res.data.totalCount
        this.totalPage = +res.data.totalPage
        this.userList = res.data.currentPageRecords
        if (+res.data.totalCount > 0 && res.data.currentPageRecords.length === 0) {
          this.page.pageIndex--
          this.getRoleList()
        }
        this.page.userName = ''
      } catch (error) {
        console.log(error)
      }
    },
    // 删除人员
    async delRole(id) {
      try {
        await this.$confirm('是否确认删除该角色', '提示', {
          type: 'warning'
        })
        await delRoleAPI(id)
        // const res = await delRoleAPI(id)
        // console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    closeFn() {
      this.isSwitch = false
    },
    // 修改
    upRole(roe) {
      this.isSwitch = true
      this.$refs.newlyBuild.userForm = { ...roe }
    }
  }
}
</script>

<style scoped>

</style>
